<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
  </head>

  <body>
    <!-- 引入公共头部 -->
    <div class="header"></div>
    <script type="text/javascript">
      $(".header").load("common/head.html", function () {
        var cookie = document.cookie;
        if (cookie) {
          var username = getCookie("lgc");
          if (username) {
            $(".tipsBar").html(
              `<span>欢迎您,${username} | </span><span onclick="exit()">退出</span>`
            );
          }
        }
      });
    </script>

    <!-- 注册 -->
    <div class="register">
      <div class="reg">
        <div class="reg-left">
          <h2>已有账户登录</h2>
          <p><a href="login.html">登录你的匹克账户></a></p>
          <a href="#"><img src="../images/login-code.jpg" alt="" /></a>
          <p>匹克官方网店微信公众号</p>
          <p>关注不一样的运动商城</p>
        </div>
        <div class="reg-right">
          <h2>欢迎使用匹克会员!</h2>
          <p>
            <input type="text" id="username" placeholder="用户名" />
            <span id="user_span"></span>
          </p>
          <p class="p-text">
            用户名由数字、字母、下划线组成, 6-12位,且不能以数字开头
          </p>
          <p>
            <input type="password" id="pwd" placeholder="密码" />
            <span id="pwd_span"></span>
          </p>

          <p class="p-text">密码由6-12位组成,建议由数字、英文、字母组合</p>
          <p>
            <input type="text" id="phone" placeholder="手机号码" />
            <span id="phone_span"></span>
          </p>
          <p>
            <input type="text" id="email" placeholder="邮箱" />
            <span id="email_span"></span>
          </p>

          <div id="btn"><a href="javascript:;">立即注册</a></div>

          <input type="checkbox" class="p-last" id="checked" /><span
            >我已阅读并同意 匹克会员注册协议 及 隐私条款</span
          >
        </div>
      </div>
    </div>

    <footer></footer>
    <script>
      $("footer").load(`common/footer.html`);
    </script>
  </body>
  <script>
    // 用户标识

    var cookie = document.cookie;
    if (cookie) {
      var username = getCookie("lgc");
    }
    console.log(username);
    function exit() {
      deleteCookie("lgc");
      location.reload();
    }
    $(document).on("click", ".searchBtn", function () {
      type = $(".searchCon").val();
      window.location.href = `./goodsList.html?type=${type}`;
    });
    var userInp = $("#username");
    var userSpan = $("#user_span");
    var pwdInp = $("#pwd");
    var pwdSpan = $("#pwd_span");
    var phoneInp = $("#phone");
    var phoneSpan = $("#phone_span");
    var emailInp = $("#email");
    var emailSpan = $("#email_span");
    var btn = $("#btn");
    // console.log(userInp, userSpan, pwdInp, phoneInp, emailInp, btn);

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;

    //用户名
    userInp.on("blur", async function () {
      var username = userInp.val().trim();
      userInp.val(username);
      isUserOk = false;
      var reg = /^[a-zA-Z_]\w{5,11}$/;
      if (reg.test(username)) {
        var result = await isExistUser({ username });
        var { status, msg } = result;
        if (status) {
          userSpan.text("√");
          userSpan.addClass("green");
          isUserOk = true;
        } else {
          userSpan.text("用户名已存在");
          userSpan.addClass("green");
        }
      } else {
        userSpan.text("用户名格式有误");
        userSpan.addClass("green");
      }
    });

    // 密码:
    pwdInp.on("change", async function () {
      var pwd = pwdInp.val().trim();
      pwdInp.val(pwd);
      isPwdOk = false;
      var reg = /^\w{6,12}$/;
      if (reg.test(pwd)) {
        pwdSpan.text("√");
        pwdSpan.addClass("green");
        isPwdOk = true;
      } else {
        pwdSpan.text("密码格式有误");
        pwdSpan.addClass("green");
      }
    });

    //手机号:
    phoneInp.on("change", async function () {
      var phone = phoneInp.val();
      phoneInp.val(phone);
      isPhoneOk = false;
      var reg = /^1[3-9]\d{9}$/;
      if (reg.test(phone)) {
        var result = await isExistPhone({ phone });
        var { status, msg } = result;
        if (status) {
          phoneSpan.text("√");
          phoneSpan.addClass("green");
          isPhoneOk = true;
        } else {
          phoneSpan.text(msg);
          phoneSpan.addClass("green");
        }
      } else {
        phoneSpan.text("手机号格式有误");
        phoneSpan.addClass("green");
      }
    });

    //邮箱:
    emailInp.on("change", async function () {
      var email = emailInp.val();
      emailInp.val(email);
      isEmailOk = false;
      var reg = /^\w+@\w+\.(com|cn|edu)$/;
      if (reg.test(email)) {
        var result = await isExistEmail({ email });
        var { status, msg } = result;
        if (status) {
          emailSpan.text("√");
          emailSpan.addClass("green");
          isEmailOk = true;
        } else {
          emailSpan.text(msg);
          emailSpan.addClass("green");
        }
      } else {
        emailSpan.text("邮箱格式有误");
        emailSpan.addClass("green");
      }
    });

    btn.on("click", async function () {
      var isChecked = $("#checked").prop("checked");
      // console.log(isUserOk && isPwdOk && isPhoneOk && isEmailOk && isChecked);

      if (isUserOk && isPwdOk && isPhoneOk && isEmailOk && isChecked) {
        var username = userInp.val().trim();
        var pwd = pwdInp.val();
        var phone = phoneInp.val();
        var email = emailInp.val();

        var result = await register({ username, pwd, phone, email });
        var { status, msg } = result;
        if (status) {
          window.location.href = "login.html";
        } else {
          alert(msg);
        }
      } else {
        alert("请正确填写并勾选同意");
      }
    });
  </script>
</html>
